<template>
	<scroll-view scroll-y="true" class="scroll-container">
		<view>
			<view class="card">
				<view class="title">泉州风光</view>
				<swiper circular indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
					<swiper-item style="background-color: #808080;">
						<image src="/static/city1.png" style="width: 100%;" />
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.png" style="width: 100%;" />
					</swiper-item>
					<swiper-item>
						<image src="/static/city5.png" style="width: 100%;" />
					</swiper-item>
				</swiper>
			</view>
			<view class="card">
				<view>
					<rich-text :nodes="quanzhouNodes"></rich-text>
				</view>
				<view>
					<rich-text :nodes="quanzhouHtml"></rich-text>
				</view>
			</view>
			<view class="card">
				<view class="title">探索进度</view>
				<view class="progress-container">
					<text class="progress-text">当前进度:{{progress}}%</text>
					<progress class="progress-bar" :percent="progress" show-info border-radius="10"
						active-color="#007AFF" backgroundColor="#F0F0F0"></progress>
				</view>
			</view>
			<view class="card">
				<view class="title">选择城市</view>
				<picker class="picker" mode="region" @change="onCityChange" :value="selectedCity">
					<view class="picker-text">
						当前选择：{{region[0]}} - {{region[1]}} - {{region[2]}}
					</view>
				</picker>
			</view>
			<view class="card">
				<view class="title">泉州宣传</view>
				<video class="video" :src="videoUrl" controls poster="/static/city4.png"></video>
			</view>
			<view class="card">
				<view class="title">泉州背景音乐</view>
				<view class="media-audio">
					<button class="button" type="primary" @click="playAudio">播放</button>
					<text class="musictext">泉州南音-泉州传统乐团</text>
				</view>
			</view>
			<view class="card">
				<view class="title">偏好设置</view>
				<view class="view-group">
				<view class="travel-mode">
					<text >出行方式：</text>
					<view style="padding: 5rpx;">
					<radio-group  @change="onTravelModeChange">
						<radio :value="'bus'" :checked="travelMode === 'bus'">公交</radio>
						<radio :value="'drive'" :checked="travelMode === 'drive'">自驾</radio>
						<radio :value="'walk'" :checked="travelMode === 'walk'">步行</radio>
					</radio-group>
					</view>
				</view>
				</view>
				<view class="view-group">
				<view class="recommend-spots">
					<text>显示推荐景点：</text>
					
					<switch :checked="showRecommendSpots" @change="onShowRecommendSpotsChange"></switch>
					
				</view>
				</view>
				<view class="view-group">
				<view class="explore-radius">
					<text>探索半径：{{ radius }}km</text>
					<slider min="1" max="20" :value="radius" @change="onRadiusChange"></slider>
				</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				progress: 60,
				videoUrl: '/pages/city/city-video.mp4',
				region: ['福建省', '泉州市', '丰泽区'],
				AudioContext: null,
				radius: 12,
				travelMode: 'bus',
				showRecommendSpots: true,
				onReady() {
					// 初始化音频：路径改为 /static/city-music.mp3（你的音频文件）
					this.audioContext = uni.createInnerAudioContext();
					this.audioContext.src = '/pages/city/city-music.mp3';
					// 错误监听：加载失败时提示具体原因
					this.audioContext.onError(err => {
						uni.showToast({
							title: `音频加载失败：${err.errMsg}`,
							icon: 'none',
							duration: 3000
						});
					});
				},
				quanzhouNodes: [{
					name: 'div',
					attrs: {
						class: 'intro-title',
						style: 'line-height: 40px; color: #333; font-weight: bold;font-size: 24px;'
					},
					children: [{
						type: 'text',
						text: '泉州介绍'
					}]
				}, {
					name: 'div',
					attrs: {
						class: 'intro-content',
						style: 'line-height: 24px; color: #333; padding: 10px 0;font-weight: bold;'
					},
					children: [{
						type: 'text',
						text: '海上丝绸之路起点-泉州',

					}]
				}],
				quanzhouHtml: '<div style="text-align: left; color:#4d4d4d;line-height: 20px;">\
				        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期披普为“东方第一大港”。</p >\
						<br/>\
				        <p>著名景点：清源山、开元寺、洛阳桥、清净寺</p >\
						<br/>\
				        <p>特色文化：拥有<span style="color:blue;">南音</span>、<span style="color:blue;">木偶戏</span>和<span style="color:blue;">闽南建筑</span>等丰富的非物质文化遗产。</p >\
				      </div>'
			}
		},
		methods: {
			onCityChange(e) {
				this.region = e.detail.value;
			},
			playAudio() {
				this.audioContext.stop();
				this.audioContext.play().catch(err => {
					uni.showToast({
						title: '音频播放失败',
						icon: 'none'
					});
				});
			},
			onTravelModeChange(e) {
				this.travelMode = e.detail.value;
			},
			onShowRecommendSpotsChange(e) {
				this.showRecommendSpots = e.detail.value;
			},
			onRadiusChange(e) {
				this.radius = e.detail.value;
			}
		}
	}
</script>

<style>
	.card {

		background-color: #fff;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		width: 90%;
		max-width: 350px;
		margin: 20px auto;
	}

	.title {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.video {
		width: 100%;
	}

	.media-audio {
		padding: 20rpx;
		background-color: #fff;
		margin-top: 10rpx;
	}
    .recommend-spots,
	.travel-mode,	
	.explore-radius {
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	
	.progress-text {
		color: #717171;
		font-size: 14px;
	}

	.picker {
		padding: 20rpx;
		background-color: #f0f0f0;
		margin-top: 10rpx;
	}

	.preference,
	.media-video,
	.media-audio {
		padding: 20rpx;
		background-color: #fff;
		margin-top: 10rpx;
	}

	.picker-text {
		font-size: 14px;
	}

	.button {
		width: 30%;
	}

	.musictext {
		font-size: 14rpx;
		color: #888888;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
	}
	.view-group {
	  border-bottom: 1px solid #eee; /* 浅灰色分隔线 */
	  padding-bottom: 10px;
	  margin-bottom: 10px;
	}
</style>